<template>
  <div class="malfunction">
    <a-row :gutter="[16, 16]">
      <a-col :span="16">
        <div class="chart-item">
          <h3 class="item-title">线路告警信息</h3>
          <div class="item-container">
            <screen-item @saveNum="saveNum"></screen-item>
            <a-row :gutter="[16, 16]">
              <a-col
                :span="6"
                v-for="(item, index) in lineAlarmList"
                :key="index"
                ><div class="card-box">
                  <img class="card-box-img" :src="item.url" alt="" />
                  <p>星链ID：{{ item.starlinkId }}</p>
                  <p>内容详情：{{ item.alarm_msg }}</p>
                  <p>告警等级：{{ item.level }}</p>
                  <p>告警时间：{{ item.time }}</p>
                </div>
              </a-col>
            </a-row>
            <a-row class="pagination-line">
              <a-pagination
                v-model="current"
                :total="total"
                :page-size="8"
                show-less-items
                @change="onChange"
              />
            </a-row>
          </div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="chart-item">
          <h3 class="item-title">设备故障信息</h3>
          <div class="item-container">
            <screen-item @saveNum="saveNum2"></screen-item>
            <a-table
              :columns="columns"
              :data-source="deviceAlarmList"
              :pagination="false"
              :rowKey="
                (record, index) => {
                  return index;
                }
              "
            >
            </a-table>
            <a-row class="pagination-line">
              <a-pagination
                v-model="current2"
                :total="total2"
                :page-size="10"
                show-less-items
                @change="onChange2"
              />
            </a-row>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import screenItem from '../../components/sreenItem/screenItem';
import { getLineAlarm, getDeviceAlarm } from '../../services/user';
import { mapState } from 'vuex';
export default {
  name: 'Demo',
  i18n: require('./i18n'),
  data() {
    return {
      lineAlarmList: [],
      deviceAlarmList: [],
      current: 1,
      total: 0,
      start: window.localStorage.getItem('startTime'),
      end: window.localStorage.getItem('endTime'),
      current2: 1,
      total2: 0,
      start2: window.localStorage.getItem('startTime'),
      end2: window.localStorage.getItem('endTime'),
      columns: [
        {
          title: '设备ID/名称',
          dataIndex: 'starlinkId',
          key: 'starlinkId',
        },
        {
          title: '告警类型',
          dataIndex: 'type',
          key: 'type',
        },
        {
          title: '告警时间',
          dataIndex: 'time',
          key: 'time',
        },
      ],
    };
  },
  components: {
    screenItem,
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),
    desc() {
      return this.$t('description');
    },
  },
  methods: {
    saveNum(arr) {
      this.start = arr[0];
      this.end = arr[1];
      this.current = 1;
      // 接受传递过来的参数
      this.getInfo();
    },
    saveNum2(arr) {
      this.start2 = arr[0];
      this.end2 = arr[1];
      this.current2 = 1;
      // 接受传递过来的参数
      this.getDevice();
    },
    onChange(current) {
      this.current = current;
      this.getInfo();
    },
    onChange2(current) {
      this.current2 = current;
      this.getDevice();
    },
    afterLineAlarm(res) {
      if (res.data.total_num !== 0) {
        this.lineAlarmList = res.data.result;
      } else {
        this.lineAlarmList = [];
      }
      this.total = res.data.total_num;
    },
    afterDeviceAlarm(res) {
      if (res.data.total_num !== 0) {
        this.deviceAlarmList = res.data.result;
      } else {
        this.deviceAlarmList = [];
      }

      this.total2 = res.data.total_num;
    },
    getInfo() {
      getLineAlarm({
        starlinkId: '11777',
        start: this.start,
        end: this.end,
        page: this.current,
        pagesize: '8',
      }).then(this.afterLineAlarm);
    },
    getDevice() {
      getDeviceAlarm({
        start: this.start2,
        end: this.end2,
        page: this.current2,
        pagesize: '10',
      }).then(this.afterDeviceAlarm);
    },
  },
  mounted() {
    this.getInfo();
    this.getDevice();
  },
};
</script>

<style scoped lang="less">
@import 'index';
.card-box-img {
  display: block;
  width: 100%;
  height: 130px;
  margin-bottom: 7px;
}
.card-box {
  p {
    padding: 0;
    margin: 0;
    line-height: 30px;
  }
}
.pagination-line {
  margin-top: 20px;
  text-align: center;
}
</style>
